<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>

		<u-grid col='5' :border="false">
			<u-grid-item class="grid-item" v-for="item in navList" :key="item.navid">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.imgurl" :size="32"></u-icon>
				<text class="grid-text">{{item.title}}</text>
			</u-grid-item>
		</u-grid>

		<!-- 商品列表 -->
		<u-cell-group class="pro-cell">
			<u-cell v-for="item in proList" :key="item.proid" :icon="item.img1" :title="item.proname" :iconStyle="{
				width: '80px',
				height: '80px'
			}"
			@click="goToDetail(item.proid)"
			></u-cell>
		</u-cell-group>

		<!-- 点击回到顶部 -->
		<u-icon @click='goTopClick' v-show="scrollTop >= 300" class="back-top" name="arrow-upward" size="28"></u-icon>


	</view>
</template>

<script>
	import {
		getBannerList,
		getNavList,
		getProList
	} from '../../api/home.js'
	export default {
		data() {
			return {
				bannerList: [],
				navList: getNavList(),
				proList: [],
				count: 2,
				scrollTop: 0
			}
		},
		mounted() {

			getBannerList().then(res => {
				// console.log(res);
				this.bannerList = res.data
			})

			getProList().then(res => {
				this.proList = res.data
			})
		},
		onPullDownRefresh(){
				// 监听用户下拉刷新
				// console.log(1234567890);
				getProList().then(res => {
					this.proList = res.data
					this.count = 2
					
					// 关闭下拉刷新
					uni.stopPullDownRefresh()
				})
		},
		onReachBottom() {
			// 监听页面上拉加载了
			getProList({
				count: this.count
			}).then(res => {
				if (res.data.length > 0) {
					this.proList = [...this.proList, ...res.data]
					this.count++
				} else {
					uni.showToast({
						title: '没有更多数据了'
					})
				}

			})
		},
		onPageScroll({
			scrollTop
		}) {
			this.scrollTop = scrollTop
		},
		methods: {

			goTopClick() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration:100
				})
			},
				
			goToDetail(proid){
				console.log(proid);
				uni.navigateTo({
					url:"/pages/detail/detail",
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('proid', proid)
					  }
				})
			}
		}
	}
</script>

<style>
	swiper {
		width: 100%;
		height: 230px;
	}

	swiper image {
		width: 100%;
		height: 100%;
	}

	.grid-text {
		font-size: 12px;
	}

	.grid-item {
		margin-top: 16px;
	}

	.pro-cell {
		overflow: hidden;
	}

	.back-top {
		position: fixed;
		bottom: 66px;
		right: 16px;
		background-color: white;
		border: 1px solid red;
		padding: 4px;
		border-radius: 50%;
	}
</style>